<template>
  <div class="login-bg">
    <div class="login-container">
      <div class="login-header">
        <img class="logo" src="@/assets/images/logo.png" alt="logo" />
        <p class="login-title">汇民ERP管理系统</p>
      </div>

      <div class="login-left-container">
        <img class="login-left-img" src="@/assets/images/login_left.png" alt="" />
      </div>

      <div class="login-right-container">
        <div class="login-box">
          <p class="title">登录</p>
          <n-form
            ref="formRef"
            :model="formValue"
            :show-label="false"
            :rules="rules"
            @submit.prevent="handleSubmit"
          >
            <n-form-item path="username">
              <n-input
                v-model:value="formValue.username"
                size="large"
                clearable
                placeholder="输入账号"
              >
                <template #prefix>
                  <n-icon size="20">
                    <AccountCircleFilled />
                  </n-icon>
                </template>
              </n-input>
            </n-form-item>
            <n-form-item path="password">
              <n-input
                v-model:value="formValue.password"
                type="password"
                size="large"
                show-password-on="mousedown"
                clearable
                placeholder="输入密码"
              >
                <template #prefix>
                  <n-icon size="20">
                    <PasswordFilled />
                  </n-icon>
                </template>
              </n-input>
            </n-form-item>
            <n-form-item path="code">
              <n-row gutter="20">
                <n-col :span="14">
                  <n-input v-model:value="formValue.code" size="large" placeholder="输入验证码">
                    <template #prefix>
                      <n-icon size="20">
                        <SafetyCheckRound />
                      </n-icon>
                    </template>
                  </n-input>
                </n-col>
                <n-col :span="10">
                  <img class="h-40px" :src="codeImage" alt="验证码" @click="updateCapt" />
                </n-col>
              </n-row>
            </n-form-item>
            <n-form-item>
              <n-button
                class="mt-5"
                attr-type="submit"
                size="large"
                type="primary"
                block
                :loading="loading"
                :disabled="loading"
              >
                登录
              </n-button>
            </n-form-item>
          </n-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { FormInst, FormRules } from 'naive-ui';
import { onMounted, reactive, ref, useTemplateRef } from 'vue';
import { AccountCircleFilled, PasswordFilled, SafetyCheckRound } from '@vicons/material';
import { useGetCaptcha } from './hooks';
import { login } from '@/apis/system/user';
import { useUserStore } from '@/stores/user';
import { useRoute, useRouter } from 'vue-router';

const formRef = useTemplateRef<FormInst>('formRef');
const formValue = reactive({
  username: '',
  password: '',
  code: '',
  uuid: '',
});
const codeImage = ref('');
const loading = ref(false);
const userStore = useUserStore();
const router = useRouter();
const route = useRoute();
const rules: FormRules = {
  username: { required: true, message: '请输入账号', trigger: ['input', 'blur'] },
  password: { required: true, message: '请输入密码', trigger: ['input', 'blur'] },
  code: { required: true, message: '请输入验证码', trigger: ['input', 'blur'] },
};

onMounted(async () => {
  updateCapt();
});

async function updateCapt() {
  const { uuid, img } = await useGetCaptcha();
  formValue.uuid = uuid.value;
  codeImage.value = img.value;
}

function handleSubmit() {
  formRef.value?.validate(async (errors) => {
    if (errors) {
      return;
    }

    loading.value = true;
    try {
      const res: any = await login(formValue);

      if (res.code === 200) {
        const redirect = (route.query.redirect as string) || '/';
        userStore.setToken(res.data.AccessToken);
        router.replace(redirect);
      }
    } finally {
      loading.value = false;
    }
  });
}
</script>

<style lang="less" scoped>
.login-bg {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20version='1.1'%20baseProfile='full'%20width='100%25'%20height='100%25'%20viewBox='0%200%201400%20800'%3e%3crect%20x='1300'%20y='400'%20rx='40'%20ry='40'%20width='150'%20height='150'%20stroke='rgb(129,%20201,%20149)'%20fill='rgb(129,%20201,%20149)'%3e%3canimateTransform%20attributeType='XML'%20attributeName='transform'%20begin='0s'%20dur='35s'%20type='rotate'%20from='0%201450%20550'%20to='360%201450%20550'%20repeatCount='indefinite'/%3e%3c/rect%3e%3cpath%20d='M%20100%20350%20A%20150%20150%200%201%201%20400%20350%20Q400%20370%20380%20370%20L%20250%20370%20L%20120%20370%20Q100%20370%20100%20350'%20fill='%23a2b3ff'%3e%3canimateMotion%20path='M%20800%20-200%20L%20800%20-300%20L%20800%20-200'%20dur='20s'%20begin='0s'%20repeatCount='indefinite'/%3e%3canimateTransform%20attributeType='XML'%20attributeName='transform'%20begin='0s'%20dur='30s'%20type='rotate'%20values='0%20210%20530%20;%20-30%20210%20530%20;%200%20210%20530'%20keyTimes='0%20;%200.5%20;%201'%20repeatCount='indefinite'/%3e%3c/path%3e%3ccircle%20cx='150'%20cy='150'%20r='180'%20stroke='%2385FFBD'%20fill='%2385FFBD'%3e%3canimateMotion%20path='M%200%200%20L%2040%2020%20Z'%20dur='5s'%20repeatCount='indefinite'/%3e%3c/circle%3e%3c!--%20三角形%20--%3e%3cpath%20d='M%20165%20580%20L%20270%20580%20Q275%20578%20270%20570%20L%20223%20483%20Q220%20480%20217%20483%20L%20165%20570%20Q160%20578%20165%20580'%20fill='%23a2b3ff'%3e%3canimateTransform%20attributeType='XML'%20attributeName='transform'%20begin='0s'%20dur='35s'%20type='rotate'%20from='0%20210%20530'%20to='360%20210%20530'%20repeatCount='indefinite'/%3e%3c/path%3e%3c!--%20%3ccircle%20cx='1200'%20cy='600'%20r='30'%20stroke='rgb(241,%20243,%20244)'%20fill='rgb(241,%20243,%20244)'%3e--%3e%3c!--%20%3canimateMotion%20path='M%200%200%20L%20-20%2040%20Z'%20dur='9s'%20repeatCount='indefinite'/%3e--%3e%3c!--%20%3c/circle%3e--%3e%3cpath%20d='M%20100%20350%20A%2040%2040%200%201%201%20180%20350%20L%20180%20430%20A%2040%2040%200%201%201%20100%20430%20Z'%20fill='%233054EB'%3e%3canimateMotion%20path='M%20140%20390%20L%20180%20360%20L%20140%20390'%20dur='20s'%20begin='0s'%20repeatCount='indefinite'/%3e%3canimateTransform%20attributeType='XML'%20attributeName='transform'%20begin='0s'%20dur='30s'%20type='rotate'%20values='0%20140%20390;%20-60%20140%20390;%200%20140%20390'%20keyTimes='0%20;%200.5%20;%201'%20repeatCount='indefinite'/%3e%3c/path%3e%3crect%20x='400'%20y='600'%20rx='40'%20ry='40'%20width='100'%20height='100'%20stroke='rgb(129,%20201,%20149)'%20fill='%233054EB'%3e%3canimateTransform%20attributeType='XML'%20attributeName='transform'%20begin='0s'%20dur='35s'%20type='rotate'%20from='-30%20550%20750'%20to='330%20550%20750'%20repeatCount='indefinite'/%3e%3c/rect%3e%3c/svg%3e");
  background-size: 100% 100%;
  background-size: cover;
}

.login-header {
  position: absolute;
  left: 100px;
  top: 50px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  margin-bottom: 40px;
  .logo {
    width: 60px;
  }
  .login-title {
    font-size: 30px;
    color: #333;
    font-weight: bold;
    padding-left: 10px;
  }
}

.login-container {
  position: relative;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 96.5%;
  height: 94%;
  padding: 0 50px;
  background-color: #fffc;
  border-radius: 10px;
}

.login-left-container {
  width: 800px;
  margin-right: 10px;
  .login-left-img {
    width: 100%;
    height: 100%;
  }
}

.login-right-container {
  .login-box {
    height: 420px;
    width: 450px;
    padding: 30px 36px 0 36px;
    box-shadow: #0000001a 0 2px 10px 2px;
    .title {
      font-size: 20px;
      color: #333;
      text-align: center;
      margin-bottom: 40px;
    }
  }
}
</style>
